import React from 'react';
import { history } from 'umi'
import { connect } from 'umi';
import { Divider, Empty, message, Spin } from 'antd';
import { PageContainer, DividerContainer } from '@/molecules';
import { useRequest, defaultFormatResult } from '@/hooks';
import { Icon } from '@/pages/Recruitment/components';
import { PersonalCard } from './containers';
import { DetailSteps } from './components';
import { getTrialInfoList, getFeedbackNum, getInformalEmployeeInfo, getInformalDetail } from './services';
import { renderActionIcon } from './utils';

const formatList = list => {
    if (!list) return [];
    return list.map(item => ({
        title: item?.statusName || '',
        description: item?.remark || '',
        date: item?.createTime || '',
        ...item
    }));
};

const Detail = ({ location, user }) => {
    const { query } = location;

    const { data: informalDetail, loading: informalLoading } = useRequest(() => getInformalDetail(query?.id), {
        refreshDeps: [query?.id],
        ready: !!query?.id,
        ...defaultFormatResult
    });

    const { data: employeeInfo, loading: infoLoading } = useRequest(
        () => getInformalEmployeeInfo(query?.employeeCode),
        {
            refreshDeps: [query?.employeeCode],
            ready: !!query?.employeeCode,
            ...defaultFormatResult
        }
    );

    const { data: infoList, loading } = useRequest(() => getTrialInfoList(query?.employeeCode), {
        refreshDeps: [query?.employeeCode],
        ready: !!query?.employeeCode,
        ...defaultFormatResult
    });

    const handleDetail = ({ id, status, employeeCode }) => {
        let path = `/office/personnelManagement/onboardAndLeave/informal/process/detail?id=${id}`;
        if (status === 'newEntry') {
            path = `/office/personnelManagement/onboardAndLeave/entryManage/entryEmployeeDetail?entryPersonnelCode=${employeeCode}`;
        }
        history.push(path);
    };

    const { loading: feedbackLoading, run: fetchFeedbackNum } = useRequest(() => getFeedbackNum(query?.id), {
        manual: true,
        onSuccess: res => {
            if (res) {
                const { code, data: resData, msg } = res;
                if (code === 10000) {
                    let url = '/office/personnelManagement/onboardAndLeave/informal/feedback/record';
                    if (resData <= 0) {
                        url = '/office/personnelManagement/onboardAndLeave/informal/feedback/create';
                    }
                    history.push({
                        pathname: url,
                        query
                    });
                } else {
                    message.error(msg);
                }
            } else {
                message.error('操作失败');
            }
        }
    });

    const handleAction = React.useCallback((record, status) => {
        history.push({
            pathname: '/office/personnelManagement/onboardAndLeave/informal/process',
            query: {
                employeeCode: record?.employeeCode || '',
                status: status || record?.status || ''
            }
        });
    }, []);

    return (
        <PageContainer loading={loading || infoLoading || informalLoading}>
            <Spin spinning={feedbackLoading}>
                <div style={{ display: 'flex' }}>
                    <div style={{ flex: 1 }}>
                        <PersonalCard data={employeeInfo} />
                    </div>
                    <div style={{ display: 'inline-block' }}>
                        <DividerContainer style={{ padding: '24px 50px' }}>
                            {renderActionIcon(informalDetail, user, handleAction)}
                            <Icon title="试用反馈" type="shiyongfankui" onClick={fetchFeedbackNum} />
                            {/* <Icon title="沟通新员工" type="goutong" onClick={() => {}} /> */}
                        </DividerContainer>
                    </div>
                </div>
                <Divider />
                <DetailSteps dataSource={formatList(infoList)} onClick={handleDetail} />
                {infoList && infoList.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
            </Spin>
        </PageContainer>
    );
};

export default connect(({ user }) => ({ user: user.currentUser }))(Detail);
